<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-plus" @click.native="addsite">录入信息</el-button>
      </div>
      <div class="selech">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="搜索类型">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="content" placeholder="请输入搜索的内容"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content_body">
      <ul>
        <li class="left_">
          <el-tree :data="datagoods" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </li>
        <li class="right_">
          <el-table
            v-if="data_moban.values != []"
            :data="data_moban.values"
            border
            style="width: 100%;margin-top:30px;"
            ref="refs"
          >
            <el-table-column v-if="data_moban.options != []" v-for="item in data_moban.options" align="center"
                             :key="item.name" :label="item.name" width="170">
              <template slot-scope="scope">
                <img v-if="item.type=='img'" class="img_big" :src="scope.row[item.name]" alt="">
                <span v-else> {{scope.row[item.name]}} </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="320">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.$index,data_moban.values,scope)">编辑
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.$index,data_moban.values,scope)">删除信息
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </li>
      </ul>
    </div>

    <el-dialog :title="data_moban.label" width="80%" :visible.sync="piciflag">
      <el-form :label-position="labelPosition" ref="ruleForm" label-width="120px"
               v-for="item in data_optios">
        <el-form-item v-if="item.type == 'input'" :label="item.name">
          <el-input v-model="item.val"></el-input>
        </el-form-item>
        <el-form-item v-if="item.type == 'date'" :label="item.name">
          <el-date-picker
            v-model="item.val"
            align="right"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="item.type == 'img'" :label="item.name">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :before-upload="BreedImage">
            <img v-if="item.val" :src="item.val" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="piciflag = false">取 消</el-button>
    <el-button type="primary" @click="Addpic">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {},
    components: {},
    data() {
      return {
        bianjiflag:true,  //true注册状态  false 修改状态
        rowsindex:0,     //点击编辑时的位置
        mobanvalues: [],
        mobanoptions: [],
        title_name: '',
        data_optios: [], //点击过去 Title数据
        data_pici: [],   //点击获取批次数据
        data_moban: {
          values: [],
          options: []
        },  //点击获取模板数据
        piciflag: false,
        labelPosition: 'right',
        content: '',
        options: [{
          value: '1',
          label: '养殖'
        }, {
          value: '2',
          label: '种植'
        }],
        value: '',
        formInline: {
          user: '',
          region: ''
        },
        datagoods: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    methods: {

      Addpic() {  //信息录入
        let data_arr = {}
        this.data_optios.forEach((ite) => {
          if (ite.type == 'date') {
            let date = new Date(ite.val)
            ite.val = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
          }
          data_arr[ite.name] = ite.val
        });

        if(this.bianjiflag == true){  //新增流程
          this.data_pici.children.forEach((item) => {
            if (item.label == this.data_moban.label) {
              item.values.push(data_arr)
            }
          })
          this.datasubmit();
        }else{                   //编辑流程流程
          let rows = this.data_moban.values[this.rowsindex];
          this.data_optios.map((currentValue, index, arr) => {
            rows[currentValue.name] = currentValue.val
          });
          this.datasubmit();
        }
      },
      datasubmit() {
        let dataupdate = {
          'id': this.data_pici.id,
          'upload': {
            children: this.data_pici.children
          }
        }
        this.$apifn.EditBatches(dataupdate).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.$message({
              message: this.data_optios.name + '录入信息成功',
              type: 'success'
            })
            this.piciflag = false
          }
        }).catch((res) => {
        })
      },
      BreedImage(file) {     //添加图片
        let date = new Date().getTime().toString()
        if (this.$oneselfFn.IMAGEVAL(file)) {
          this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.INFORMATION + date, file }).update(
            (ref) => {
              if (ref.status == 200) {
                this.data_optios.forEach((item) => {
                  if (item.type == 'img') {
                    item.val = ref.data.imageURL + '/' + ref.data.imagePath
                  }
                })
              }
            }, (res) => {
            })
        }
        return false
      },
      handleNodeClick(data) {  //点击导航
        if (data.pname) {        //批次
          this.data_pici = data
        }
        if (data.options) {      //模板
          this.data_moban = data
          this.data_optios = data.options
        }

      },

      addsite() {     //录入信息
        if(this.data_optios.length == 0){
          this.$message({
            message: '请先选择分类',
            type: 'warning'
          })
        }else {
          this.bianjiflag = true;
          this.piciflag = true;
        }
      },
      handleDelete(index, rows, val) { //删除
        rows.splice(index, 1)
        this.datasubmit()
      },
      handleEdit(index, rows, val) {  //点击编辑修改按钮 编辑修改
        this.rowsindex = index;
        this.bianjiflag = false;
        let lis = [];
        this.data_optios.map((currentValue, index, arr) => {
          currentValue.val = val.row[currentValue.name];
          lis.push(currentValue)
        })
        this.data_optios = lis;
        this.piciflag = true
      },
      onSubmit() {

      },

      goodsdaohang() {  //获取分类导航
        this.$apifn.ShowBatches({ 'limit': '1000' }, '1').then((ref) => {
          if (ref.data.Response.code == 200) {
            this.datagoods = ref.data.Response.data.data
            localStorage.setItem('moban', JSON.stringify(ref.data.Response.data.data))
            this.datagoods.forEach((v) => {
              v['label'] = v.ename
              v['children'] = v.batch.map(function(item) {
                item['label'] = item.pname
                return item
              })
              delete v.batch
            })

          }
        }).catch((res) => {

        })
      }
    },
    watch: {},
    computed: {
      //计算属性
    },
    created() {
      // this.pccontent();
      this.goodsdaohang()

    },
    mounted() {
      //生命周期
    }
  }
</script>
<style scoped>
  .img_big {
    width: 50px;
    height: 50px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }

  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 147px;

    }

    .add_zhandian {
      width: 100%;
      height: 54px;
    }

    .selech {
      width: 100%;
      height: 50px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }

    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }

    .selech {
      width: 79%;
      height: 100%;
      float: right;
    }

    .content_body {
      width: 100%;
      height: 650px;
    }

    .content_body ul {
      width: 100%;
      height: 100%;
    }

    .content_body ul li {
      float: left;
      height: 100%;
    }

    .left_ {
      width: 20%;
    }

    .right_ {
      width: 79%;
    }
  }

</style>
